<template>
  <div>
    <!--分类的全局组件-->
    <Category :scene="scene"></Category>
    <!--底部展示已有SPU-->
    <el-card shadow="always" style="margin: 10px 0px">
      <div v-show="scene == 0">
        <el-button
          type="primary"
          size="default"
          :icon="Plus"
          :disabled="categoryStore.c3Id ? false : true"
          @click="addSpu"
          >添加SPU</el-button
        >
        <el-table border stripe style="margin: 10px 0px" :data="spuArr">
          <el-table-column
            label="序号"
            type="index"
            align="center"
            width="80"
          ></el-table-column>
          <el-table-column label="SPU名称" property="spuName"></el-table-column>
          <el-table-column
            label="SPU描述"
            property="description"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column label="操作">
            <!--row:即为一个已有SPU对象-->
            <template #="{ row, $index }">
              <el-button
                size="small"
                type="primary"
                :icon="Plus"
                title="添加SKU"
                @click="addSku(row)"
              ></el-button>
              <el-button
                type="warning"
                size="small"
                :icon="Edit"
                title="修改SPU"
                @click="updateSpu(row)"
              ></el-button>
              <el-button
                type="info"
                size="small"
                :icon="InfoFilled"
                title="查看SKU列表"
                @click="lookSku(row.id)"
              ></el-button>

              <el-popconfirm
                width="220"
                confirm-button-text="确定"
                cancel-button-text="取消"
                :icon="InfoFilled"
                icon-color="#626AEF"
                @confirm="deleteSpu(row.id)"
                :title="`你确定删除${row.spuName}?`"
              >
                <template #reference>
                  <el-button
                    type="danger"
                    size="small"
                    :icon="Delete"
                    title="删除SPU"
                  ></el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[3, 5, 7, 9]"
          :small="false"
          :disabled="false"
          :background="true"
          layout="prev, pager, next, jumper,->,sizes,total"
          :total="total"
          @current-change="getSpuList"
          @size-change="sizeHandler"
        />
      </div>
      <SpuForm
        v-show="scene == 1"
        @changeScene="changeScene"
        ref="spu"
      ></SpuForm>
      <SkuForm v-show="scene == 2" @changeVal="changeVal" ref="sku"></SkuForm>
    </el-card>

    <!--展示某一个SPU全部SKU数据-->
    <el-dialog title="SKU列表" v-model="dialogVisibe" style="margin-top: 100px">
      <el-table :data="skuArr" v-loading="loading">
        <el-table-column label="sku名称" prop="skuName"></el-table-column>
        <el-table-column label="sku价格" prop="price"></el-table-column>
        <el-table-column label="sku重量" prop="weight"></el-table-column>
        <el-table-column label="sku图片">
          <template v-slot="{ row, $index }">
            <img
              :src="row.skuDefaultImg"
              alt=""
              style="width: 100px; height: 100px"
            />
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { Plus, Edit, InfoFilled, Delete } from "@element-plus/icons-vue";
import { ref, watch,onUnmounted} from "vue";
import {
  reqGetSpuList,
  reqGetSkuList,
  reqRemoveSpu,
} from "../../../api/product/spu/index";
//引入两个子组件
import SpuForm from "./SpuFrom.vue";
import SkuForm from "./SkuForm.vue";
let loading = ref(false);
//响应式数据:控制对话框的显示与隐藏
let dialogVisibe = ref(false);

let sku = ref();
//引入小仓库
import useCategoryStore from "../../../stores/category";
import { ElMessage } from "element-plus";
let categoryStore = useCategoryStore();
let spu = ref();
//分页器当前页码
let currentPage = ref<number>(1);
//分页器一页展示几条数据
let pageSize = ref<number>(3);
//场景的响应式数据
let scene = ref<number>(0);
//存储某一个三级分类下已有的SPU的数据
let spuArr = ref([]);
//存储已有的SPU个数
let total = ref(0);

//存储sku数据
let skuArr = ref([]);
//监听分类的三级id变化
watch(
  () => categoryStore.c3Id,
  () => {
    //三级分类ID发生变化,spu这个数组清空
    spuArr.value = [];
    if (categoryStore.c3Id == "") return;
    //封装一个函数:用于获取某一个三级分类下已有的SPU数据
    getSpuList();
  }
);

//获取已有SPU数据
const getSpuList = async () => {
  //准备好需要携带参数
  //发请求获取已有SPU的数据
  let result = await reqGetSpuList(
    currentPage.value,
    pageSize.value,
    categoryStore.c3Id
  );
  //存储数据
  spuArr.value = result.records;
  total.value = result.total;
};
//分页器下拉菜单的自定义事件回调
const sizeHandler = () => {
  //参数:当前页码归第一页
  currentPage.value = 1;
  getSpuList();
};

//添加SPU按钮的回调
const addSpu = () => {
  //切换场景为1
  scene.value = 1;
  //调用子组件的方法
  spu.value.initAddSpu(categoryStore.c3Id);
};
//更新已有的SPU按钮回调
//row:代表已有的SPU
const updateSpu = (row) => {
  //切换场景为1
  scene.value = 1;
  //在父组件的内部:获取子组件VC,使用子组件的方法|响应式数据
  spu.value.initHasSpuData(row);
};

//添加SKU按钮的回调
//row:已有的SPU
const addSku = (row) => {
  //切换场景为2
  scene.value = 2;
  //调用子组件的initSkuData方法
  sku.value.initSkuData(categoryStore.c1Id, categoryStore.c2Id, row);
};

//子组件SpuForm绑定自定义事件:儿子通知父亲切换场景为0
const changeScene = ({ newScene, flag }) => {
  //切换场景
  scene.value = newScene;
  if (flag == "update") {
    getSpuList();
  } else {
    //添加
    currentPage.value = 1;
    getSpuList();
  }
};

//子组件skuform自定义事件回调
const changeVal = (val) => {
  scene.value = val;
};

//查看SKU:显示对话框
const lookSku = async (spuId: number) => {
  dialogVisibe.value = true;
  //开始加载
  loading.value = true;
  //发请求获取某一个SPU下全部SKU列表数据
  let result = await reqGetSkuList(spuId);
  loading.value = false;
  skuArr.value = result;
};

//删除已有SPU
const deleteSpu = async (id) => {
  try {
    //删除已有的SPU
    await reqRemoveSpu(id);
    ElMessage({
      message: "删除成功",
      type: "success",
    });
    //再次获取更新后全部SPU
    getSpuList();
  } catch (error) {
    ElMessage({
      message: "删除失败",
      type: "error",
    });
  }
};

//路由切换的时候:情况仓库数据
onUnmounted(()=>{
   categoryStore.c1Id = '';
   categoryStore.c2Id='';
   categoryStore.c3Id='';
   categoryStore.c1Arr = [];
   categoryStore.c2Arr=[];
   categoryStore.c3Arr = [];
})
</script>

<style scoped>
</style>